<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span>距离端午节还有：</span>
    <img src="" alt="">
    <img src="" alt="">
    <span>天</span>
    <img src="" alt="">
    <img src="" alt="">
    <span>小时</span>
    <img src="" alt="">
    <img src="" alt="">
    <span>分钟</span>
    <img src="" alt="">
    <img src="" alt="">
    <span>秒</span>
    <script>
        //## 4.数码时钟
        // -   根据定时器动态改变img 的src的路径
        // -   img.src = ''
        
       
           

            
        
        
        // 倒计时
        function fn(){
                var nowDate = new Date()
                var duanwujie = new Date('2020/6/25')
                var time1 = nowDate.getTime()
                var time2 = duanwujie.getTime()
                var chatime = time2 - time1
                chatime /= 1000
                var sec = parseInt(chatime % 60)
                var min = parseInt((chatime  / 60) % 60)
                var hours = parseInt((chatime / 3600)% 24)
                var days = parseInt(chatime / 3600 / 24)
                days =  days < 10 ? '0' + days : days
                hours =  hours < 10 ? '0' + hours : hours
                min =  min < 10 ? '0' + min : min
                sec =  sec < 10 ? '0' + sec : sec


                // 转成字符串拼接起来
                var str = ''
                str += days + hours + min + sec
                console.log(str);
                console.log(str.length)
                
                var imgs = document.getElementsByTagName('img')
                // 循环字符串
                for(var i = 0 ; i < str.length ; i++){
                        // 截取下标对应元素
                        imgs[i].src = 'img/' + str.substr(i,1) + '.png'
                }
            }
            
            fn()
       
          setInterval(function(){
            fn()
            },1000)
            
    </script>
</body>
</html>